<template>
  <div>
    <el-table
      v-if="thList.length > 0"
      stripe
      :data="tableData"
    >
      <el-table-column
        v-for="item in thList"
        :prop="item.prop"
        :label="item.lable"
        :key="item.value"
      >
        <template slot-scope="scope">
          <template v-if="item.prop !== 'state'">
            {{ scope.row[item.prop] }}
          </template>
          <template v-else>
            <span v-if="scope.row.state === '2'">已完成</span>
            <span v-else-if="scope.row.state === '1'">已发货</span>
            <span v-else="scope.row.state === '0'">未发货</span>
          </template>
        </template>
      </el-table-column>
      
      <el-table-column
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click.native="showDetail(scope.row.id)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <h3 class="detail-table--title">
        详情
      </h3>
      <div class="form-wrapper">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="订单号" prop="class_name">
            <el-input v-model="ruleForm.orderNum" :readonly="true"></el-input>
          </el-form-item>        
          <el-form-item label="订单金额" prop="class_name">
            <el-input v-model="ruleForm.orderPrice" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="退单状态" prop="class_name">
            <el-input v-model="ruleForm.state" :readonly="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'DetailTable',
    props: {
      thList: {
        type: Array,
        required: true
      },
      tableData: {
        type: Array
      }
    },
    data() {
      return {
        ruleForm: {
          orderNum: '123',
          orderPrice: '68.00',
          state: '上架'
        },
        dialogVisible: false
      }
    },
    methods: {
      showDetail(id) {
        // this._get(id)
        this.dialogVisible = true
      },
      async _get(id) {
        try {
          let {data: {data, code, msg}} = await this.$axios({
            url: '',
            method: 'GET',
            params: {
              id
            }
          })
          if (code === 0) {
            
          } else {
            this.$message(data.message)
          }
        } catch(e) {
          this.$message({
            type: 'error',
            message: e
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .detail-table--title {
    margin-bottom: 10px;
    text-align: center;
    margin-top: -42px;
  }
</style>
<style lang="scss" scoped>
  .form-wrapper {
    margin: 0 auto;
  }
</style>
